<template>
  <el-container >
    <div class="panelCon">
      <!-- <div class="tips">
        请到微信小程序管理后台服务类目中添加 【商家自营】-【内衣】
      </div> -->
      <div class="title" style="margin-top:0;">发送设置</div>
      <div class="edit_con">
        <div class="edit_content">
          <el-form size="medium" label-width="100px" class="edit_form">
            <el-form-item label="发送设置">
              <el-radio-group v-model="obj.channelTemplate.status">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="发送时间" style="color:#606266;">{{obj.channelTemplate.timing}}</el-form-item>

            <el-form-item label="模板设置">
              <el-radio-group v-model="obj.channelTemplate.is_base">
                <el-radio :label="1" v-if="obj.channelType.indexOf(1) > -1">系统默认</el-radio>
                <el-radio :label="0" v-if="obj.channelType.indexOf(2) > -1">自定义模板</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <div class="templateDemo">
                <div v-if="obj.channelTemplate.is_base == 1" class="pic_area"></div>
                <div v-if="obj.channelTemplate.is_base == 0">
                  <el-select v-model="obj.channelTemplate.template_id" placeholder="请选择" style="width:250px">
                    <el-option
                      v-for="item in tl"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>
                  <!-- <router-link tag="a" target="_blank" to="#" style="margin-left:10px">
                    <el-button type="text">添加模板</el-button>
                  </router-link> -->
                </div>
              </div>
            </el-form-item>

          </el-form>
        </div>

        <div class="edit_footer">
          <el-button v-has size="medium" type="primary" >保存数据</el-button>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  addNoticeConfig,
  editNoticeConfig
} from '@/api/mall/notice';
import { getTemplateWxAll} from '@/api/mall/sms';
export default {
  name: 'noticeSms',
  data(){
    return {
      tl:[],
      isLoading:false
    }
  },
  props:{
    obj:{
      type:Object,
      default:function(){
        return {};
      }
    },
    scene:{
      type:String,
      default:''
    },
    redirect:{
      type:String,
      default:''
    }
  },
  components: {},
  created(){},
  mounted(){    
    this.getWxTemplAll();
  },
  computed:{},
  methods: {
    //刷新模板列表
    refresh(){
      this.getWxTemplAll();
    },
    //获取微信公众号消息模板列表
    getWxTemplAll(){
      this.isLoading = true;
      getTemplateWxAll(this.scene).then(res => {
        this.isLoading = false;
        this.tl = res.msg;
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //保存数据(新增/更新)
    saveData() {
      this.isLoading = true;
      if(this.obj.channelTemplate.id){
        //存在ID，更新
        editNoticeConfig(this.obj.channelTemplate).then(res => {
          this.isLoading = false;
          this.$router.push(this.redirect);
        }).catch(e => {
          this.isLoading = false;
        });
      }else{
        //不存在ID，新增
        addNoticeConfig(this.obj.channelTemplate).then(res => {
          this.isLoading = false;
          this.$router.push(this.redirect);
        }).catch(e => {
          this.isLoading = false;
        });
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.panelCon{
  width: 100%;
  padding:5px 20px 20px;

  .tips{
    padding: 15px;
    color:#606266;
    font-size: 14px;
    line-height: 28px;
    border: 1px solid #abdcff;
    background-color: #f0faff;
  }

  .title{
    background:#e0e3e8;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }

  .edit_con{
    .edit_content{
      .edit_form{
        width: 100%;

        .templateDemo{
          width: 100%;
          padding: 20px;
          background: #F4F6F8;

          .pic_area{
            width: 250px;
            min-height: 445px;
			background: url('@/assets/images/wxapp_bg.png');
            background-size: 250px 445px;
          }
        }
      }
    }
  }
}
</style>